<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

// const data = ref({
//   井名: '',
//   所属作: '',
//   区块: '',
// });
const data = ref({
  id: '',
  wellCode: '',
  wellName: '',
  status: '',
  locationFormatted: '',
  depth: '',
  remark: '',
});

const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
  onCancel() {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const modalData = modalApi.getData<Record<string, any>>();
      console.log("modalData:", modalData);
      if (modalData) {
        // 检查 location 是否为数组，并转换为字符串形式
        if (Array.isArray(modalData.location)) {
          modalData.locationFormatted = `经度：${modalData.location[0]}，纬度：${modalData.location[1]}`;
        }
        data.value = { ...data.value, ...modalData };
      }
    }
  },
  title: 'Well Modal',
});
</script>
<template>
  <Modal>
    <div v-if="data">
      <!-- 显示指定的参数信息 -->
      <div>
        <p><strong>井ID:</strong> {{ data.id }}</p>
        <p><strong>井编号:</strong> {{ data.wellCode }}</p>
        <p><strong>井名称:</strong> {{ data.wellName }}</p>
        <p><strong>状态:</strong> {{ data.status }}</p>
        <p><strong>坐标:</strong> {{ data.locationFormatted }}</p>
        <p><strong>井深:</strong> {{ data.depth }}</p>
        <p><strong>备注:</strong> {{ data.remark }}</p>
      </div>
    </div>
  </Modal>
</template>

<style scoped>
/* 这里可以添加一些CSS样式来美化Modal */
p {
  padding: 5px;
  margin: 0;
}

strong {
  margin-right: 10px;
}
</style>
